// JavaScript Document
window.onload=function(){
	var oBox=document.getElementById("box");
	var oUl=oBox.getElementsByTagName("ul")[0];
	var aImg=oUl.getElementsByTagName("img");
	var oBtn=document.getElementById("btn");
	var aSimg=oBtn.getElementsByTagName("img");
	//给大图片设置总高度让他可以放下五张图片，但是因为设置了超出部分隐藏所以看不到
	cssStyle(oUl,'height',cssStyle(aImg[0],'height')*aImg.length);
	var up=1;//代表向上走的计数器
	var down=3;//代表向下走的计数器
	var flag=1;//flag=1代表默认想上走当falg=-1时代表向下走
	//点击小图片，点击那个大图片对应显示该图片
	for(var i=0;i<aSimg.length;i++)
	{
		aSimg[i].index=i;
		aSimg[i].onclick=function(){
			
			for(var i=0;i<aSimg.length;i++)
			{
				aSimg[i].className="";
			}
			this.className="active";
			//向哪个方向走给哪个反向的计数器赋值
			if(flag==1)
			{
				up=this.index;
			}
			else
			{
				down=this.index;
			}
			sport(oUl,'top',cssStyle(aImg[0],'height')*(-this.index));
		}
	}
	timer=setInterval(function(){
		
		if(up<aImg.length&&flag==1)
		{
			for(var i=0;i<aSimg.length;i++)
			{
				aSimg[i].className="";
			}
			aSimg[up].className="active";
			sport(oUl,'top',cssStyle(aImg[0],'height')*(-(up++)));
			//判断现在的图片是否是最后一张
			if(up==5)
			{
				flag=-1
			}
		}
		else
		{
			if(down>=0&&flag==-1)
			{
				for(var i=0;i<aSimg.length;i++)
				{
				aSimg[i].className="";
				}
				aSimg[down].className="active";
				sport(oUl,'top',cssStyle(aImg[0],'height')*(-(down--)));
			}
			else
			{
				up=1;
				down=3;
				flag=1;
			}
		}
		
		
	},3000);
	
}